
<%= turbo_frame_tag 'new_issue_form' do %>

<%= render Modal::DialogComponent.new(
  title: issue.persisted? ? "#{t("actions.edit")} #{Issue.model_name.human}" : "#{t("actions.create")} #{Issue.model_name.human}",
  icon: icon_for(:issues),
  modal_box: { class: "max-w-xl relative cpy-issue-detail" }) do %>

  <div class="space-y-4">
    <%= form_with(model: issue, url: create_issue_url, html: { class: 'flex flex-col justify-stretch gap-2', data: { turbo_frame: "_top" } }) do |f| %>
      <% if issue.errors.any? %>
        <div class="alert alert-error">
          <%= issue.errors.full_messages.to_sentence.capitalize %>
        </div>
      <% end %>

      <fieldset class="fieldset grow">
        <%= f.label :title, Issue.human_attribute_name(:title), class: "fieldset-legend" %>
        <%= f.text_field :title, autofocus: true, required: true, class: "input w-full" %>
      </fieldset>

      <fieldset class="fieldset grow">
        <%= f.label :labels_list, Issue.human_attribute_name(:label_ids), class: "fieldset-legend" %>

        <% available_options = (issue.labels_list + issue.project.issue_labels.map(&:title)).uniq.sort %>
        <%= f.select :labels_list,
            available_options,
            { include_blank: false },
            {
              multiple: true,
              data: { controller: 'select2', tags: true }
            } %>
      </fieldset>

      <fieldset class="fieldset grow">
        <%= f.label :description, Issue.human_attribute_name(:description), class: "fieldset-legend" %>

        <%= react_component("MarkdownEditor", defaultValue: issue.description, mirrorInputTargetSelector: "#new_issue_form .js-issue-description" ) %>
        <%= f.hidden_field :description, class: "js-issue-description" %>
      </fieldset>
      <div class="mt-2 flex gap-2 justify-center">
        <a class="btn btn-ghost" data-action="click->modal#close">
          <%= t('actions.cancel') %>
        </a>

        <% text = issue.persisted? ? t('actions.update') : t('actions.create') %>
        <%= f.button text, class: "btn btn-primary" %>
      </div>
    <% end %>
  </div>

<% end %>
<% end %>
